<template>
  <div class="scroll">
    <el-breadcrumb class="ml-10px mt-40px" separator="/">
      <el-breadcrumb-item class="font-size-4" :to="{ path: '/subscribe/subscribeList' }">征订管理</el-breadcrumb-item>
      <el-breadcrumb-item>年级班级</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <div class="screen flex mt-20px ml-10px justify-between flex-items-end">
      <div class="flex flex-1">
        <el-row :gutter="20" class="w-100%">
          <el-col :span="6">
            <div class="form-cell flex flex-items-center">
              <span class="font-bold pr-10px">年级名称</span>
              <el-input v-model="formInline.name" class="cell-input" placeholder="请输入年级名称" clearable />
            </div>
          </el-col>
        </el-row>
      </div>
      <a-space>
        <el-button size="default" class="small-btn !border-rd-20px" color="#397dfd" plain>重置</el-button>
        <el-button size="default" class="small-btn !border-rd-20px !pl-50px !pr-50px" color="#397dfd" type="primary">
          查询
        </el-button>
      </a-space>
    </div>
    <div class="mt-40px pl-10px pr-10px pb-20px bg-white border-rd-10px">
      <div class="pb-15px pt-15px">
        <el-button size="default" class="small-btn" color="#397dfd" type="primary" @click="handleAddGrade">
          新建年级
        </el-button>
      </div>
      <div>
        <el-empty description="暂无年级班级" />
      </div>
    </div>
    <AddGradeModel ref="addGradeModelRef" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import AddGradeModel from './components/addGradeModel.vue'
const formInline = ref({
  name: ''
})
const addGradeModelRef = ref(null)
const handleAddGrade = () => {
  addGradeModelRef.value.show(true)
}
</script>
<style lang="scss" scoped>
.screen {
  :deep(.el-input__wrapper) {
    box-shadow: none !important;
    padding: 1px 8px !important;
    border-radius: 20px;
  }
  :deep(.el-select__wrapper) {
    box-shadow: none !important;
    padding: 8px !important;
    border-radius: 20px;
  }
}
</style>
